<template>
  <div>
    {{ fullName }}
    <button @click="fullName='w u'">修改</button>
  </div>
</template>

<script lang="ts">
 import { defineComponent } from 'vue'
  export default  defineComponent({
    name:'App'
  })
</script>
<script lang="ts" setup>
  import {computed,ref} from 'vue'
  const firstName=ref("zhang")
  const lastName=ref("wang")
  // //书写一个只读的计算属性
  // const fullName=computed(()=>{
  //   return fistName.value+" "+lastName.value
  // })


  //书写一个可读可写的计算属性
  const fullName=computed({
    get(){
      return firstName.value+" "+lastName.value
    },
    set(newVal){
      firstName.value = newVal.split(" ")[0];
    lastName.value = newVal.split(" ")[1];
    }
  })
</script>

<style lang="less" scoped>
  
</style>